{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/allFans.css" />
{/block}
{block name="main" }
<div class="page-bd">
    <!-- 页面内容-->
    <div class="top">
        <div class="inputBox"><img src="__STATIC__/mobile/default/images/selech01.png" alt=""><input class="fs30 color_3" type="text" placeholder="请输入ID/昵称"></div>
        <span class="fs30 color_3 close">取消</span>
    </div>
    <div class="tab">
        <div class="color_9 tab_all" data-type='all'><p class="fs32 tabActive" >全部</p><span class="fs22 num_all">0人</span></div>
        <div class="color_9" data-type='1'><p class="fs32 ">一级</p><span class="fs22 num_1">0人</span></div>
        <div class="color_9" data-type='2'><p class="fs32">二级</p><span class="fs22 num_2">0人</span></div>
        <!--<div class="color_9" data-type='3'><p class="fs32">三级</p><span class="fs22 num_3">0人</span></div>-->
    </div>
    <div class="tabBox">
        <div class="block allBox"></div>
        <div class="block 1Box box"></div>
        <div class="block 2Box box"></div>
        <div class="block 3Box box"></div>
    </div>
</div>
<script type="text/html" id="listTpl">
{{each list as item index}}
<div class="cellBox">
	<div class="cell">
		<a href="#" class="left">
			<img src="{{item.headimgurl?item.headimgurl:'__STATIC__/mobile/default/images/defheadimg.jpg'}}" alt="">
			<div class="info">
				<div class="userName"><p class="fs28 fw_b color_3">{{item.nick_name}}</p>
				{literal}
				{{if item.role_id > 0}}
				<span class="fs22 color_w BGcolor_r fw_b">{{item.role_name}}</span>
				{{/if}}
				{/literal}
				</div>
				<div class="fs26 color_3 userId">ID{{item.user_id}}</div>
			</div>
		</a>
		<div class="right">
			<img src="__STATIC__/mobile/default/images/goodslist05.png" alt="" data-type="0">
		</div>
	</div>
	<div class="moneyInfo fs26 color_9">
		<!-- <div><span>我的佣金:{{item.account.total_dividend}}</span><p>我的星券:{{item.account.total_integral}}</p></div> -->
	</div>
</div>
{{/each}}
</script>
{/block}

{block name="footer"}
<script>
var nowPage = [],getAgain = [],isLoadend = [];
var _type = 'all';
var is_stat = 1;

$('.left-arrow').on('click',function(){
	window.location.href = '{:url("member/center/index")}';
})
$('.page-bd').scroll(function(){
	let box_h=$(this).height()
	let content_h=$('.scrollBox').height()
	let scroll_h=$(this).scrollTop();
	if(content_h-box_h-scroll_h<20){
		getList();
	}
})
//请求列表数据
function getList(isagain) {
	page = nowPage[_type];
	if (typeof(page) == 'undefined') page = 1;
	if (isLoadend[_type] == true ) return false;
	if (isagain == true){
		if (getAgain[_type] == false) return false;
		getAgain[_type] = false;
	}else{
		$('.'+_type+'Box').append('<div class="get_list_tip" data-type="'+_type+'">加载数据中...</div>');
	}
	isLoadend[_type] = true;
	$.ajax({
		url:'{:_url("member/api.MyTeam/getList",["level"=>"【_type】","p"=>"【page】","is_stat"=>"【is_stat】"])}',// 跳转到 action
		data:{"user_id":$('.inputBox input').val()},
		type:'post',
		cache:false,
		dataType:'json',
		success:function(res) {					
			isLoadend[_type] = false;
			if(res.code  == 0 ){
				_alert(res.msg);
				getAgain[_type] = true;
				$('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
				return false;
			}
			if (is_stat == 1){
				is_stat = 0;				
				$('.num_all').html('('+res.stat.all+')');
				$('.num_1').html('('+res.stat[1]+')');
				$('.num_2').html('('+res.stat[2]+')');
				$('.num_3').html('('+res.stat[3]+')');
			}					
			nowPage[_type] = page+1;
			$('.'+_type+'Box').find('.get_list_tip').remove();
			 $('.'+_type+'Box').append(template('listTpl',res));
			if (res.page_count == page) {
				$('.'+_type+'Box').append('<div class="get_list_tip">---我也有底线的---</div>');
				isLoadend[_type] = true;
			}
		},error : function() {
			isLoadend[_type] = false;
			getAgain[_type] = true;
			$('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
		}
	});
}
getList();//默认执行
//重新请求数据
$(document).on('click','.get_list_tip',function () {
	_type = $(this).data('_type');
	getList(true);
})
		
$('.tab div').on('click',function(){
	let index=$(this).index();
	_type = $(this).data('type');
	if ($('.'+_type+'Box').html() == ''){
		isLoadend[_type] = false;
		getAgain[_type] = false;
		getList();//执行加载
	}
	$(this).addClass('tabActive')
	$(this).siblings().removeClass('tabActive')
	$('.block').eq(index).show();
	$('.block').eq(index).siblings().hide();
})



$('.close').on('click',function(){
	$('.tab').show();
	$('.inputBox input').val('');
	isLoadend['all'] = false;
	nowPage['all'] = 1;
	$('.allBox').html('');
	getList();
})
$('.inputBox input').change(function(){
	$('.tab').hide();
	isLoadend['all'] = false;
	nowPage['all'] = 1;
	$('.allBox').html('');	
	getList();
});
//粉丝的账户信息
$('.tabBox').on('click','.cellBox .right',function(){
	$(this).parent().siblings().slideToggle()
	let imgObj=$(this).find('img')
	if(imgObj.attr('data-type')==0){
		imgObj.css('transform','rotate(180deg)')
		imgObj.attr('data-type','1')
	}else{
		imgObj.css('transform','rotate(3600deg)')
		imgObj.attr('data-type','0')
	}
})

</script>
{/block}